import React from 'react';
import logo from './logo.svg';
import { Spin } from 'antd';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import routes from './page';
import { Subscription } from 'rxjs';
import auth from './page/auth';
import { User } from './model/user';

import './App.css';

interface AppState {
  authenticated: boolean;
  user: User | undefined;
  loading: boolean;
}

class App extends React.Component {
  private subjects: Subscription | undefined;

  state: AppState = {
    authenticated: false,
    user: undefined,
    loading: false,
  };

  componentDidMount() {
    this.subjects = auth.user.subscribe(({ authenticated, user }) => {
      this.setState({ authenticated, user });
    });
    this.setState({ loading: true });
    auth
      .load()
      .then(() => this.setState({ loading: false }))
      .catch((err) => {
        console.error(err);
        this.setState({ loading: false });
      });
  }

  componentWillUnmount() {
    this.subjects!.unsubscribe();
  }

  render() {
    const { authenticated, user, loading } = this.state;
    return (
      <Spin spinning={loading} size="large" tip="加载中，请等一哈 :-p" delay={100}>
        <Router>
          <div className="page-header">
            <nav className="nav">
              {[
                { to: '/', title: 'Home' },
                { to: '/about', title: 'About' },
                { to: '/post/editor', title: 'Markdown' },
                { to: '/post/home', title: 'PostH' },
                { to: '/workspace', title: 'WS(暂不可用)' },
              ].map((it, index) => (
                <Link className="nav-item" key={index} to={it.to}>
                  {it.title}
                </Link>
              ))}
            </nav>
            <div className="page-header-operates">
              {authenticated ? (
                <>
                  <Link className="operator" to="/user/summary">
                    {user!.nickName}
                  </Link>
                  <a
                    onClick={(e) => {
                      e.preventDefault();
                      auth.logout();
                    }}
                    href="/"
                    className="operator"
                  >
                    退出登录
                  </a>
                </>
              ) : (
                <>
                  <Link className="operator" to="/user/login">
                    登录
                  </Link>
                  <Link className="operator" to="/user/register">
                    注册
                  </Link>
                </>
              )}
            </div>
          </div>
          <div className="main content">
            <Switch>
              {routes.map((route, index) => (
                <Route path={route.path} key={index} children={<route.page />} />
              ))}
            </Switch>
          </div>
          <div style={{ textAlign: 'center', borderTop: '1px solid #ccc' }}>
            Footer
            <img src={logo} className="App-logo" alt="logo" />
            <Link className="nav-item" to="/about">
              关于我们
            </Link>
          </div>
        </Router>
      </Spin>
    );
  }
}

export default App;
